<include file="public@header" />
<style type="text/css">
	.title{
		font-weight: bold;
		font-size: 3rem;
		padding-bottom: 10px;
		border-bottom: 2px solid #333;
	}
	.arrows_item{
		cursor:hand;
	}
	table .item_btn{
		background: #f2f2f2;
		border: 1px solid #e5e5e5;
		height: 32px;
		width: 32px;
		line-height: 20px;
		padding: 5px;
		display: inline-block;
		text-align: center;
		color: #9e9e9e;
	}
	#category_item tr{
		pointer-events:auto
	}
	.form-group{
		padding:0px 15px;
	}
	.save_item{
		float: right;
	}
	.form2{
		padding: 10px;
	}
	.item_type_control{
		text-align: right;
		padding-right: 15px;
	}
</style>
</head>
<body>
	<div class="wrap">
		<div class="title">
			{$category.category_name} - [ {$category.hex_name} ]
			<a href="javascript:void(0)" class="btn save_item btn-info">{:lang('SAVE')}</a>
		</div>
		<form method="post" class="form-horizontal" id='form1'>
			<div class="form-group">
				<table class="table table-hover table-bordered">
					<tr>
						<td colspan="5" align="right">
							<input type="button" class="btn btn-success" name="add_item" value="添加字段">
						</td>
					</tr>
					<tr>
						<th>&nbsp;</th>
						<th>字段名称</th>
						<th>类型</th>
						<th>状态</th>
						<th>操作</th>
					</tr>
					<tbody id="category_item">
						<foreach name="item" item="vo">
						<tr>
							<td>
								<a href="javascript:void(0);" class="btn item_btn arrows_item"><i class="fa fa-arrows"></i></a>
							</td>
							<td>
								<a href="javascript:void(0);" data-item_name='{$vo.item_name}' class="btn item_btn edit_item"><i class="fa fa-pencil"></i></a>
								&emsp;
								{$vo.item_name} - [ {$vo.item_hex} ]
							</td>
							<td>
								<switch name="vo.item_type">
								    <case value="1">文本</case>
								    <case value="2">单选</case>
								    <case value="3">多选</case>
								    <default />未知
								</switch>
							</td>
							<td>
								<eq name="vo.status" value="1">
									<div class='text-success'>显示</div>
							    <else/>
							    	<div class='text-danger'>隐藏</div>
								</eq>
							</td>
							<td>
								<eq name="vo.status" value="1">
									<a data-item_id='{$vo.id}' data-item_status='2' class="btn item_btn update_status"><i class="fa fa-eye-slash"></i></a>
							    <else/>
							    	<a data-item_id='{$vo.id}' data-item_status='1' class="btn item_btn update_status"><i class="fa fa-eye"></i></a>
								</eq>
								&nbsp;
								<a href="javascript:void(0);" data-item_id='{$vo.id}' class="btn item_btn edit_item_type"><i class="fa fa-wrench"></i></a>
								&nbsp;
							</td>
							<input type="hidden" name="item_index[]" value="{$vo.item_hex}">
							<input type="hidden" name="item_name_{$vo.item_hex}" value="{$vo.item_name}" />
							<input type="hidden" name="item_hex_{$vo.item_hex}" value="{$vo.item_hex}" />
							<input type="hidden" name="item_status_{$vo.item_hex}" value="{$vo.status}" />
						</tr>
						</foreach>
					</tbody>
					
				</table>
				<div class="col-sm-12">
					<input type="hidden" name="category_id" value="{$category.id}" />
					
				</div>
			</div>
		</form>
	</div>
	<script src="__STATIC__/js/admin.js"></script>
	<script type="text/javascript">
		$(function(){
			Sortable.create($('#category_item')[0], {
				handle: '.arrows_item',
				animation: 150
			});

			$(document).on("click", '.remove_item', function(){
				$(this).parent().parent().remove();
			})

			$("input[name='add_item']").bind("click", function(){
				layer.prompt({title: '请输入字段名称', formType: 0}, function(item_name, index){
			  		var item_index = Math.random().toString(36).substr(2, 8).toUpperCase();
			  		
			  		var append = true;
			  		$("#category_item tr").each(function(i,ele){
			  			if($("td:eq(0)",ele).text() == item_name){
			  				layer.alert("字段名称已存在");
			  				append = false;
			  				return 1;
			  			}
			  		})


			  		if(append){
			  			var html = '<tr>\
			  				<td><a href="javascript:void(0);" class="btn item_btn arrows_item"><i class="fa fa-arrows"></i></a></td>\
							<td>' + item_name + '</td>\
							<td>-</td>\
							<td>-</td>\
							<td>\
								<a href="javascript:void(0);" class="btn item_btn remove_item"><i class="fa fa-trash"></i></a>\
							</td>\
							<input type="hidden" name="item_index[]" value="' + item_index + '">\
							<input type="hidden" name="item_name_' + item_index + '" value="' + item_name + '" />\
							<input type="hidden" name="item_hex_' + item_index + '" value="' + item_index + '" />\
							<input type="hidden" name="item_status_' + item_index + '" value="1" />\
						</tr>';

						$("#category_item").append(html);
						layer.close(index);
			  		}
				});
			})

			$(".save_item").bind('click', function(){
				var data = $("#form1").serialize();

				$.ajax({
					url: '{:url('GPSCategory/create_item')}',
					type: 'POST',
					dataType: 'json',
					data: data,
					success: function(res){
						if(res.code > 0){
							layer.msg('编辑成功');
							setTimeout(function(){
	  							window.location.href = window.location.href;
							}, 500);
		  				}else{
		  					layer.alert(res.msg, {
							  icon: 2,
							});
		  				}
					}
				})
			})

			$(document).on("click", ".edit_item", function(){
				var item_name = $(this).data('item_name');
				var _this = this;

				layer.prompt({shadeClose: true,title: '请输入字段名称', value: item_name, formType: 0}, function(item_name, index){
			  		$(_this).parent().parent().find("td:eq(0)").html(item_name);
			  		$(_this).parent().parent().find("input[type='hidden']:eq(1)").val(item_name);
			  		$(_this).data('item_name',item_name);

					layer.close(index);
				});
			})

			function createItemTypeHtml(item) {
				var html = '<form id="form2" class="form2">\
					  <div class="form-group">\
					    <label for="item_type">字段类型</label><br>\
					    <label><input type="radio" id="item_type" name="item_type" value="1" >&nbsp;文本</label>&emsp;\
					    <label><input type="radio" id="item_type" name="item_type" value="2" >&nbsp;单选</label>&emsp;\
					    <label><input type="radio" id="item_type" name="item_type" value="3" >&nbsp;多选</label>\
					  </div>\
					  <div class="form-group">\
					    <label for="item_value">字段值&nbsp;<span class="text-danger">*&nbsp;</span><span class="text-warning">多个选项用 | 分割</span></label>\
					    <input type="text" class="form-control" value="' + item.item_value + '" name="item_value" id="item_value">\
					  </div>\
					  <input type="hidden" class="form-control" value="' + item.id + '" name="item_id" id="item_value">\
					  <div class="item_type_control"><a class="btn btn-info save_item_type">保存</a>&emsp;<a class="btn btn-default close_item_type">取消</a></div>\
					</form>';

				return html;
			}
			$(document).on('click', '.edit_item_type', function(){
				var item_id = $(this).data('item_id');

				$.ajax({
					url: '{:url('GPSCategory/get_item_type')}',
					type: 'GET',
					dataType: 'json',
					data: {'item_id': item_id},
					success: function(res){
						if(res.code > 0){
							layer.open({
		                      type: 1,
		                      title: '修改字段类型',
		                      skin: 'layui-layer-demo', //样式类名
		                      closeBtn: 1, //不显示关闭按钮
		                      area: ['80%', '320px'],
		                      shadeClose: true, //开启遮罩关闭
		                      content: createItemTypeHtml(res.data)
		                    });
		                    $("input[name='item_type'][value='" + res.data.item_type + "']").prop("checked", "checked");
		  				}else{
		  					layer.alert(res.msg, {
							  icon: 2,
							});
		  				}
					}
				});
			})

			$(document).on('click', '.update_status', function(){
				var item_id = $(this).data('item_id');
				var item_status = $(this).data('item_status');
				var _this = this;

				var template = {
					'1': {
						'btn': '<i class="fa fa-eye-slash"></i>',
						'text': '<div class="text-success">显示</div>',
						'status': '2'
					},
					'2': {
						'btn': '<i class="fa fa-eye"></i>',
						'text': '<div class="text-danger">隐藏</div>',
						'status': '1'
					}
				};

				$.ajax({
					url: '{:url('GPSCategory/update_item_status')}',
					type: 'POST',
					dataType: 'json',
					data: {'item_id': item_id, 'item_status': item_status},
					success: function(res){
						if(res.code > 0){
		  					$(_this).html(template[item_status]['btn']);
							$(_this).data('item_status', template[item_status]['status']);
							$(_this).parent().parent().find('td:eq(3)').html(template[item_status]['text']);
							$(_this).parent().parent().find("input[type='hidden']:eq(3)").val(item_status);
		  				}else{
		  					layer.alert(res.msg, {
							  icon: 2,
							});
		  				}
					}
				});

				return true;
			})

			$(document).on('click', '.close_item_type', function(){
				layer.closeAll();
			})

			$(document).on('click', '.save_item_type', function(){
				var data = $("#form2").serialize();
				var type = $("input[name='item_type']:checked").val();

				var item_type = {
					'1': '文本',
					'2': '单选',
					'3': '多选'
				};

				$.ajax({
					url: '{:url('GPSCategory/save_item_type')}',
					type: 'POST',
					dataType: 'json',
					data: data,
					success: function(res){
						if(res.code > 0){
		  					layer.closeAll();
		  				}else{
		  					layer.alert(res.msg, {
							  icon: 2,
							});
		  				}
					}
				});
			})
		})
	</script>
</body>
</html>